<template>
  <div :class="['message-container', isCurrentUser ? 'sent' : 'received']">
    <!-- Receiver Message Layout -->
    <template v-if="!isCurrentUser">
      <div class="avatar">
        <el-avatar :size="40" :src="message.senderAvatar || defaultAvatar" />
      </div>
      <div class="message-content">
        <div class="message-sender" v-if="showSender">{{ message.senderName }}</div>

        <!-- File Message -->
        <div v-if="isFileMessage" class="message-bubble file-message">
          <div class="file-preview">
            <!-- Image File Preview -->
            <div v-if="isImageFile" class="image-preview">
              <img :src="message.fileUrl" @click="previewImage" alt="Image" />
            </div>

            <!-- Other File Type Icon -->
            <div v-else class="file-icon" :class="fileIconClass">
              <i :class="fileIconName"></i>
            </div>
          </div>

          <div class="file-info">
            <div class="file-name">{{ message.fileName }}</div>
            <div class="file-meta">
              <span class="file-size">{{ formatFileSize(message.fileSize || 0) }}</span>
              <a :href="message.fileUrl" target="_blank" download class="download-link">
                <el-button size="small" type="primary">Download</el-button>
              </a>
            </div>
            <div v-if="message.content" class="file-caption">{{ message.content }}</div>
          </div>

          <span class="message-time">{{ formattedTime }}</span>
        </div>

        <!-- Ordinary Text Message -->
        <div v-else class="message-bubble">
          <span class="message-text">{{ message.content }}</span>
          <span class="message-time">{{ formattedTime }}</span>
        </div>
      </div>
    </template>

    <!-- Sender Message Layout -->
    <template v-else>
      <div class="message-content">
        <!-- File Message -->
        <div v-if="isFileMessage" class="message-bubble file-message">
          <div class="file-preview">
            <!-- Image File Preview -->
            <div v-if="isImageFile" class="image-preview">
              <img :src="message.fileUrl" @click="previewImage" alt="Image" />
            </div>

            <!-- Other File Type Icon -->
            <div v-else class="file-icon" :class="fileIconClass">
              <i :class="fileIconName"></i>
            </div>
          </div>

          <div class="file-info">
            <div class="file-name">{{ message.fileName }}</div>
            <div class="file-meta">
              <span class="file-size">{{ formatFileSize(message.fileSize || 0) }}</span>
              <a :href="message.fileUrl" target="_blank" download class="download-link">
                <el-button size="small" type="primary">Download</el-button>
              </a>
            </div>
            <div v-if="message.content" class="file-caption">{{ message.content }}</div>
          </div>

          <span class="message-time">{{ formattedTime }}</span>
        </div>

        <!-- Ordinary Text Message -->
        <div v-else class="message-bubble">
          <span class="message-text">{{ message.content }}</span>
          <span class="message-time">{{ formattedTime }}</span>
        </div>

        <div class="message-status">
          <el-icon v-if="message.read" class="read-icon"><Check /></el-icon>
        </div>
      </div>
      <div class="avatar">
        <el-avatar :size="40" :src="message.senderAvatar || defaultAvatar" />
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useUserStore } from '../../stores/user';
import { Check } from '@element-plus/icons-vue';
import type { ChatMessage } from '../../services/chat';
import { format } from 'date-fns';
import { ElImageViewer } from 'element-plus';

const props = defineProps<{
  message: ChatMessage;
  showSender?: boolean;
}>();

const userStore = useUserStore();
const defaultAvatar = ref('/images/default-avatar.png');
const imageViewerVisible = ref(false);

// Determine whether the message was sent by the current user
const isCurrentUser = computed(() => {
  return props.message.senderId === userStore.userId;
});

// Check if it is a file message
const isFileMessage = computed(() => {
  return !!props.message.fileUrl;
});

// Check if it is an image file
const isImageFile = computed(() => {
  if (!props.message.fileType) return false;

  return props.message.fileType.startsWith('image/');
});

// Get the style class of the file icon
const fileIconClass = computed(() => {
  if (!props.message.fileType) return 'file-default';

  if (props.message.fileType.includes('pdf')) {
    return 'file-pdf';
  } else if (props.message.fileType.includes('word') || props.message.fileType.includes('document')) {
    return 'file-word';
  } else if (props.message.fileType.includes('excel') || props.message.fileType.includes('spreadsheet')) {
    return 'file-excel';
  } else if (props.message.fileType.includes('zip') || props.message.fileType.includes('rar') || props.message.fileType.includes('compressed')) {
    return 'file-zip';
  } else if (props.message.fileType.includes('audio')) {
    return 'file-audio';
  } else if (props.message.fileType.includes('video')) {
    return 'file-video';
  } else if (props.message.fileType.includes('text')) {
    return 'file-text';
  } else {
    return 'file-default';
  }
});

// Get the name of the file icon
const fileIconName = computed(() => {
  if (!props.message.fileType) return 'el-icon-document';

  if (props.message.fileType.includes('pdf')) {
    return 'el-icon-document-checked';
  } else if (props.message.fileType.includes('word') || props.message.fileType.includes('document')) {
    return 'el-icon-document';
  } else if (props.message.fileType.includes('excel') || props.message.fileType.includes('spreadsheet')) {
    return 'el-icon-document';
  } else if (props.message.fileType.includes('zip') || props.message.fileType.includes('rar') || props.message.fileType.includes('compressed')) {
    return 'el-icon-folder';
  } else if (props.message.fileType.includes('audio')) {
    return 'el-icon-headset';
  } else if (props.message.fileType.includes('video')) {
    return 'el-icon-video-camera';
  } else if (props.message.fileType.includes('text')) {
    return 'el-icon-document-copy';
  } else {
    return 'el-icon-document';
  }
});

// Format file size
const formatFileSize = (bytes: number) => {
  if (!bytes) return 'Unknown size';

  if (bytes < 1024) {
    return bytes + ' B';
  } else if (bytes < 1024 * 1024) {
    return (bytes / 1024).toFixed(1) + ' KB';
  } else if (bytes < 1024 * 1024 * 1024) {
    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
  } else {
    return (bytes / (1024 * 1024 * 1024)).toFixed(1) + ' GB';
  }
};

// Preview image
const previewImage = () => {
  if (isImageFile.value && props.message.fileUrl) {
    // Image preview logic can be implemented here, for example using element-plus's ImageViewer component
    // Or open a new window to display the image
    window.open(props.message.fileUrl, '_blank');
  }
};

// Format message time
const formattedTime = computed(() => {
  const date = new Date(props.message.sentTime);
  const now = new Date();
  const messageDate = new Date(date);

  // If the message was sent today, only show the time
  if (
      messageDate.getDate() === now.getDate() &&
      messageDate.getMonth() === now.getMonth() &&
      messageDate.getFullYear() === now.getFullYear()
  ) {
    return format(date, 'HH:mm');
  }

  // If the message was sent yesterday
  const yesterday = new Date(now);
  yesterday.setDate(now.getDate() - 1);
  if (
      messageDate.getDate() === yesterday.getDate() &&
      messageDate.getMonth() === yesterday.getMonth() &&
      messageDate.getFullYear() === yesterday.getFullYear()
  ) {
    return 'Yesterday ' + format(date, 'HH:mm');
  }

  // If the message was sent this year
  if (messageDate.getFullYear() === now.getFullYear()) {
    return format(date, 'MM-dd HH:mm');
  }

  // Show full date in other cases
  return format(date, 'yyyy-MM-dd HH:mm');
});
</script>

<style scoped>
.message-container {
  display: flex;
  margin-bottom: 16px;
  align-items: flex-start;
}

.message-container.sent {
  justify-content: flex-end;
}

.avatar {
  margin: 0 8px;
}

.message-content {
  display: flex;
  flex-direction: column;
  max-width: 70%;
}

.message-sender {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.message-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  position: relative;
  word-break: break-word;
  display: inline-block;
}

.sent .message-bubble {
  background-color: #95ec69;
  margin-right: 8px;
  border-top-right-radius: 4px;
}

.received .message-bubble {
  background-color: #f0f0f0;
  margin-left: 8px;
  border-top-left-radius: 4px;
}

.message-text {
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
}

.message-time {
  font-size: 11px;
  color: #999;
  margin-left: 8px;
  white-space: nowrap;
}

.message-status {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
  text-align: right;
}

.read-icon {
  color: #409EFF;
  font-size: 14px;
}

/* File Message Styles */
.file-message {
  min-width: 220px;
  display: flex;
  flex-direction: column;
}

.file-preview {
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
}

.image-preview {
  max-width: 200px;
  max-height: 200px;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.file-icon i {
  font-size: 36px;
  color: #606266;
}

.file-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.file-name {
  margin-bottom: 4px;
  font-weight: 500;
  word-break: break-all;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.file-size {
  font-size: 12px;
  color: #909399;
}

.download-link {
  text-decoration: none;
}

.file-caption {
  margin-top: 8px;
  font-size: 14px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* File Type Specific Styles */
.file-pdf i {
  color: #F56C6C;
}

.file-word i {
  color: #409EFF;
}

.file-excel i {
  color: #67C23A;
}

.file-zip i {
  color: #E6A23C;
}

.file-audio i {
  color: #409EFF;
}

.file-video i {
  color: #F56C6C;
}

.file-text i {
  color: #909399;
}
</style>